<template>
	<div class="risk">
		<div class="add" @click="add">创建检查计划</div>
		<van-search
			class="info_search"
			v-model="value"
			@search="onSearch"
			@clear="clearSearch"
			placeholder="搜索"
		/>
		<van-list
			style="margin: 10px"
			:finished="myFinished"
			v-model="myLoading"
			finished-text="没有更多了"
			@load="myOnLoad"
		>
			<van-cell
				style="margin-top: 10px"
				v-for="(item, index) in myList"
				:key="index"
			>
				<div class="warn_item">
					<div @click.stop="goDetail(item)">
						<div class="dep_sort">
							<div>
								{{ item.CheckPlanName }}
							</div>
						</div>
						<van-row gutter="20" class="dep_sort">
							<van-col span="10">
								<img
									src="@/assets/Images/AppIcon/icon_list_type.png"
									alt=""
								/>{{ item.CheckTypeName }}</van-col
							>
							<van-col span="14">
								<img
									src="@/assets/Images/AppIcon/icon_list_user.png"
									alt=""
								/>{{ item.CreateChnName }}</van-col
							>
						</van-row>
						<van-row gutter="20" class="dep_sort">
							<van-col span="10">
								<img
									src="@/assets/Images/AppIcon/icon_list_time.png"
									alt=""
								/>{{ item.StatusName }}</van-col
							>
							<van-col span="14">
								<img
									src="@/assets/Images/AppIcon/icon_list_repeat.png"
									alt=""
								/>{{ item.CheckFrequencyName }}</van-col
							>
						</van-row>
						<van-row class="dep_sort">
							<van-col>
								<img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />
								{{ item.StartDate }} 至 {{ item.EndDate }}
							</van-col>
						</van-row>
						<van-divider />

						<van-button
							class="ml-10"
							style="float: right"
							v-if="item.AllowDelete"
							size="small"
							type="default"
							@click.stop="deletePlan(item)"
							>删除</van-button
						>
						<van-button
							style="float: right"
							v-if="item.AllowPublish"
							@click.stop="publishPlan(item)"
							class="ml-10"
							size="small"
							type="default"
							>发布</van-button
						>
						<van-button
							style="float: right"
							v-if="item.AllowEnd"
							@click.stop="endPlan(item)"
							class="ml-10"
							size="small"
							type="default"
							>结束</van-button
						>
						<van-button
							style="float: right"
							v-if="item.AllowTrack"
							@click.stop="followPlan(item)"
							class="ml-10"
							size="small"
							type="default"
							>跟踪</van-button
						>
						<van-button
							style="float: right"
							v-if="item.AllowRevoke"
							@click.stop="backPlan(item)"
							class="ml-10"
							size="small"
							type="default"
							>撤销</van-button
						>
						<van-button
							style="float: right"
							@click.stop="goApprove(item)"
							class="ml-10"
							size="small"
							type="default"
							>审批历史</van-button
						>

						<!-- <div v-if="item.Status == 10">
                  <van-button
                    size="small"
                    type="default"
                    @click="deletePlan(item)"
                    >结束</van-button
                  >
                  <van-button class="ml-10" size="small" type="default"
                    >跟踪</van-button
                  >
                  <van-button class="ml-10" size="small" type="default"
                    >审批历史</van-button
                  >
                </div> -->
					</div>
				</div>
			</van-cell>
		</van-list>
		<!-- 弹出层 -->
		<van-dialog v-model="show" :showConfirmButton="false">
			<div class="dialog-content">
				<div class="dialog-title">询问</div>
				<div class="dialog-content-radio">
					<span>您确定要结束该检查计划吗?</span>
				</div>
				<div class="dialog-bottom">
					<div></div>
					<div>
						<span @click="show = false">取消</span>
						<span class="complete-btn" @click="endBackConfirm('false')"
							>结束计划</span
						>
						<!-- <span class="complete-btn" @click="endBackConfirm('true')"
							>结束计划及任务</span
						> -->
					</div>
				</div>
			</div>
		</van-dialog>
	</div>
</template>

<script>
import {
	deletePlan,
	publishPlan,
	backPlan,
	endBackConfirm,
} from '@/api/dangerCheckPlan'
import { InfoCheckplan } from '@/api/info'
import { getDate } from '@/utils/getDate'
export default {
	data() {
		return {
			value: '',
			myList: [],
			myFilter: {
				page: 0,
				cType: 1,
			},
			id: '',
			show: false,
			myLoading: false,
			myFinished: false,
		}
	},
	created() {
		this.myFilter.sourceID = this.$route.params.SourceID
		this.myFilter.sourceType = 'CommonInfo'
		this.getMyList()
	},
	methods: {
		onSearch() {
			this.myFilter.page = 0
			var conditions = [
				{
					Name: 'Keywords',
					DisplayName: '',
					Value: '',
					Operator: 'like',
					DataType: 'String',
				},
			]
			conditions.forEach((item) => {
				item.DisplayName = this.value
				item.Value = this.value
			})

			this.myFilter.conditions = JSON.stringify(conditions)
			this.getMyList()
		},
		clearSearch() {
			;(this.myFilter.page = 0), this.getMyList()
		},
		add() {
			// 创建检查计划 Danger/CheckTask
			this.$router.push({
				name: 'CheckTask',
				params: {
					SourceID: this.myFilter.sourceID,
				},
			})
		},
		getMyList() {
			this.myLoading = true
			InfoCheckplan(this.myFilter).then((res) => {
				this.myLoading = false
				if (!res.data.HasNextPage) {
					this.myFinished = true
				}
				res.data.Data.forEach((item) => {
					item.StartDate = getDate(item.StartDate)
					item.EndDate = getDate(item.EndDate)
				})
				this.myList = res.data.Data
				this.myFilter.page = res.data.PageIndex
			})
		},
		myOnLoad() {
			this.myLoading = true
			++this.myFilter.page
			InfoCheckplan(this.myFilter).then((res) => {
				res.data.Data.forEach((item) => {
					item.StartDate = getDate(item.StartDate)
					item.EndDate = getDate(item.EndDate)
				})
				this.myLoading = false
				this.myFilter.page = res.data.PageIndex
				this.myList = this.myList.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.myFinished = true
				}
			})
		},
		// 删除
		deletePlan(item) {
			const that = this

			that.$dialog
				.confirm({
					title: '询问',
					message: '您确定要删除该检查计划吗？',
				})
				.then(() => {
					deletePlan({ id: item.ID }).then((res) => {
						that.getMyList()
					})
				})
				.catch(() => {
					// on cancel
				})
		},

		endPlan(item) {
			this.show = true
			this.id = item.ID
		},

		endBackConfirm(params) {
			endBackConfirm({ id: this.id, finishTask: params }).then((res) => {
				this.getMyList()
			})
		},

		publishPlan(item) {
			const that = this

			that.$dialog
				.confirm({
					title: '询问',
					message: '您确定要发布该检查计划吗？',
				})
				.then(() => {
					publishPlan({ id: item.ID }).then((res) => {
						that.getMyList()
					})
				})
				.catch(() => {
					// on cancel
				})
		},

		backPlan(item) {
			const that = this
			that.$dialog
				.confirm({
					title: '询问',
					message: '您确定要撤回该检查计划吗？',
				})
				.then(() => {
					backPlan({ id: item.ID }).then((res) => {
						that.getMyList()
					})
				})
				.catch(() => {
					// on cancel
				})
		},

		goApprove(item) {
			this.$router.push('/Danger/DangerCheckPlanApprove?recordID=' + item.ID)
		},

		followPlan(item) {
			this.$router.push('/Danger/DangerCheckPlanFollow?CPCode=' + item.CPCode)
		},

		// 设备详情
		goDetail(item) {
			if (!item.AllowEdit) {
				this.$router.push({
					path: '/Danger/CheckPlanDetail',
					query: { id: item.ID },
				})
			} else {
				this.$router.push({
					path: '/Danger/CheckPlanEdit',
					query: { id: item.ID },
				})
			}
		
		},
	},
}
</script>
<style lang="less">
.info_search {
	padding: 10px;
	border-radius: 5px !important;
	.van-field__control {
		background-color: #ffffff !important;
	}
}
</style>
<style lang="less" scoped>
.risk {
	background-color: #e8f1f8;
	min-height: 100vh;
}
.all_dep {
	background-color: #ffffff;
}
.warn_item {
	/*margin-bottom: 10px;*/
	// padding: 10px 0 10px 10px;
	border-radius: 5px;
	position: relative;
}
.warn_header {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 10px;
	.warn_tag {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 26.64rem 0 0 26.64rem;
	}
}
.dep_sort {
	// display: flex;
	// flex-wrap: wrap;
	// margin-bottom: 5px;
	img {
		height: 15px;
		width: 15px;
		margin-right: 5px;
	}
}
.dep_btm {
	display: flex;
	justify-content: flex-end;
	.btm_item {
		display: flex;
		align-items: center;
		img {
			height: 15px;
			width: 15px;
			margin-right: 5px;
		}
	}
}

// 弹框
.dialog-content {
	position: relative;
	padding: 40px 0;

	.dialog-title,
	.dialog-bottom {
		width: 100%;
		position: fixed;
		left: 0;
		height: 40px;
		line-height: 40px;
		padding-left: 15px;
		font-size: 14px;
		background-color: #fff;
	}
	.dialog-title {
		top: 0;
	}
	.dialog-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 0;
		padding: 0 15px;
		span {
			font-size: 14px;
			color: #666;
		}
		.complete-btn {
			color: rgb(0, 141, 101);
			margin-left: 20px;
		}
	}
	.dialog-content-radio {
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: center;
		padding: 0 15px;
	}
}
</style>
